<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="date=no" />
    <title>注册</title>
    <link href="../../css/api.css" rel="stylesheet" type="text/css">
    <link href="../../css/index.css" rel="stylesheet" type="text/css">
    <link href="../../css/data-flex.min.css" rel="stylesheet" type="text/css">
    <style>
        .header {
            height: 230px;
            background: rgba(90, 194, 255, 1);
        }

        .bg {
            height: 230px;
            background: url("../../image/ui/bg_3.png");
            background-size: 100% 100%;
        }

        .close {
            width: 22px;
            height: 22px;
            margin: 33px 20px 0 0;
        }

        .h1 {
            font-size: 36px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            margin-left: 40px;
        }

        .h2 {
            font-size: 14px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            margin-top: 20px;
            margin-left: 40px;
        }

        .btn-h2 {
            width: 80px;
            height: 24px;
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 1);
            margin-left: 3px;
        }

        .container {
            z-index: 2;
            position: relative;
            margin-top: -55px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px -2px 22px 0px rgba(0, 161, 255, 0.28);
            border-radius: 20px 20px 0px 0px;
            padding: 35px 40px 30px 40px;
        }

        .row {
            height: 50px;
            background: rgba(245, 245, 245, 1);
            border-radius: 25px;
        }

        .icon {
            width: 18px;
            min-width: 18px;
            height: 18px;
            min-width: 18px;
            margin-left: 19px;
        }

        .area-number {
            min-width: fit-content;
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
            margin-left: 18px;
        }

        input {
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        input::placeholder {
            font-size: 15px;
            font-weight: 400;
            color: rgba(191, 191, 191, 1);
        }

        .eye {
            width: 16px;
            height: 16px;
            margin-right: 20px;
        }

        .btn {
            margin: 45px auto 0 auto;
            width: 210px;
            height: 46px;
            background: url("../../image/ui/btn.png");
            background-size: 100% 100%;
            text-align: center;
            padding-top: 8px;
            font-size: 18px;
            font-weight: 600;
            color: rgba(124, 69, 0, 0.5);
            line-height: 25px;
        }

        .get-verificode {
            min-width: fit-content;
            font-size: 15px;
            font-weight: 400;
            color: rgba(90, 194, 255, 1);
            margin-right: 20px;
            text-align: right;
        }

        .eye {
            width: 16px;
            height: 16px;
            margin-right: 20px;
        }

        .tips {
            font-size: 12px;
            font-weight: 400;
            color: rgba(128, 128, 128, 1);
            margin-top: 15px;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div id="login">
            <header class="header">
                <div class="bg">
                    <div data-flex="main:right">
                        <div class="close">
                            <img src="../../image/ui/close_2.png" alt="" tapmode onclick="fnBack()">
                        </div>
                    </div>
                    <div class="h1">注册</div>
                    <div class="h2" data-flex="cross:center">
                        <div>已有账号?</div>
                        <div class="btn-h2" data-flex="main:center cross:center" tapmode
                            onclick="fnToLogin()">点击登录</div>
                    </div>
                </div>
            </header>
            <div class="container">
                <div class="row" data-flex="cross:center" id="tel_login">
                    <div class="icon">
                        <img src="../../image/ui/phone.png" alt="">
                    </div>
                    <div class="area-number">
                        +86
                    </div>
                    <input style="text-indent: 8px;" data-flex-box="1" spellcheck="false" type="tel"
                        oninput="value=value.replace(/[^\d0-9]/g,'')" v-model="telephone" maxlength="11"
                        data-type="_telphone" data-verify="true" data-null="true" data-regular="true" name="手机号"
                        placeholder="请输入电话号码">
                </div>
                <div class="row" style="margin-top: 26px;" data-flex="cross:center">
                    <div class="icon">
                        <img src="../../image/ui/verificode.png" alt="">
                    </div>
                    <input style="text-indent: 18px" data-flex-box="1" spellcheck="false" type="tel"
                        oninput="value=value.replace(/[^\d0-9]/g,'')" v-model="verify_code" maxlength="6"
                        data-type="_code" data-verify="true" data-null="true" data-regular="true" name="验证码"
                        placeholder="请输入验证码">
                    <div class="get-verificode" tapmode @click="isSendCode?fnGetCode():''">{{sendBtnText}}</div>
                </div>
                <div class="row" style="margin-top: 26px;" data-flex="cross:center">
                    <div class="icon">
                        <img src="../../image/ui/password.png" alt="">
                    </div>
                    <input style="text-indent: 18px;" data-flex-box="1" spellcheck="false" :type="isPlaintext ? 'text' : 'password'" v-model="password" minlength="6" maxlength="16" data-type="_password" data-verify="true"
                        data-null="true" data-regular="true" name="密码" placeholder="请输入密码">
                    <div class="eye" @click="isPlaintext = !isPlaintext">
                        <img :src="isPlaintext ? '../../image/ui/eye_open.png' :'../../image/ui/eye_close.png'" alt="">
                    </div>
                </div>
                <div class="tips">6-16位数字、字母或组合</div>
                <div class="btn" tapmode @click="isAvailable?fnRegister():openTips()">完善资料</div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-font.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-login.js"></script>
<script type="text/javascript" src="../../script/service/service-verify.js"></script>
<script type="text/javascript">
    var $S, USER;
    var vm;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        fnInit();
    }

    function fnInit() {
        vm = new Vue({
            el: ".vueApp",
            data: {
                telephone: "",
                verify_code: "",
                password: "",
                isAvailable: false, //登录按钮是否可用
                isPlaintext: false, //密码是否明文显示
                sendBtnText: "获取验证码",
                isSendCode: true
            },
            methods: {
                fnGetCode: function () {
                    fnGetVerifyCode()
                },
            },
            watch: { //监听手机号和密码的值，来判断开启和关闭登录按钮的点击状态
                telephone: function () {
                    fnLoginBtnStatus(this);
                },
                verify_code: function () {
                    fnLoginBtnStatus(this);
                },
                password: function () {
                    fnLoginBtnStatus(this);
                }
            }
        })
    }

    //修改登录按钮的启用状态
    function fnLoginBtnStatus(el) {
        if (!isEmpty(vm.telephone) && !isEmpty(vm.verify_code) && !isEmpty(vm.password)) {
            vm.isAvailable = true;
        } else {
            vm.isAvailable = false;
        }
    }

    function openTips() {
        if(!vm.telephone) {
            fnToast('请输入手机号');
        } else if(!vm.verify_code) {
            fnToast('请输入验证码');
        } else if(!vm.password) {
            fnToast('请输入密码');
        }
    }

    // 获取验证码
    function fnGetVerifyCode() {
        if (fnVerify("tel_login")) {
            vm.isSendCode = false;
            $S.ShowProgress();
            var postData = {
                "phone": vm.telephone,
                "loginType": '1'
            };
            // 1.获取验证码 
            // 2.判断该手机号是否已注册 
            // 3.设置发送间隔
            $S.POST("verifyCode/sendCode", postData, function (ret, err) {
                vm.isSendCode = true;
                if (ret && ret.status == '200') {
                    if (ret.data.IsRegister == '0') { //该手机号已注册
                        fnToast("该手机号已注册")
                    } else {
                        vm.isSendCode = false;
                        fnVerifyTime('60', vm);
                    }
                }
                $S.CloseProgress();
            })
        }
    }

    // 注册
    function fnRegister() {
        if (fnVerify("login")) {
            $S.ShowProgress();
            var postData = {
                "phone": vm.telephone,
                "code": vm.verify_code
            };
            // 1. 判断验证码和手机号是否匹配
            // 2. 跳转选择身份页面
            $S.POST("apiTbAppUser/perfectUserInfo", postData, function (ret, err) {
                if (ret && ret.status == '200') {
                    fnOpenWin({
                        name: 'select_id',
                        url: './select_id.html',
                        pageParam: {
                            phone: vm.telephone,
                            code: vm.verify_code,
                            password: vm.password
                        }
                    })
                }
                $S.CloseProgress();
            })
        }
    }

    // $S.POST("apiTbAppUser/addUserSignRegister", postData, function (ret, err) {
    //     if (ret && ret.status == '200') {
    //         fnToast("注册成功");
    //         fnWhenLoginSucess(ret.data);
    //         var pageData = {
    //             isLine: false,
    //             isBtn: true,
    //             btnType: "title",
    //             btnName: "跳过",
    //             headerFn: "fnSkip"
    //         }
    //         fnOpenPublicWin("完善资料", "login/perfect_data", pageData);
    //         api.sendEvent({
    //             name: 'loginStatus',
    //             extra: {
    //                 login: true,
    //             }
    //         })
    //     }
    //     $S.CloseProgress();
    // })

    function fnOpenAgreement() {
        var pageData = {
            isLine: false,
        }
        fnOpenPublicWin("平台用户使用协议", "login/user_agreement", pageData)
    }

    function fnBack() {
        fnDelayCloseWin();
    }

    function fnToLogin() {
        fnOpenWin({
            name: 'login',
            url: './login.html'
        })
    }
</script>

</html>